<template>
  <div id="App">
    <!--header组件-->
    <tao-header></tao-header>
    <!--main组件(里面又有aside组件和content组件)-->
    <tao-main></tao-main>
    <!--footer组件-->
    <tao-footer></tao-footer>
    
    <!--复用组件-->
    <tao-header></tao-header>
    <tao-main></tao-main>
    <tao-footer></tao-footer>
  </div>
</template>
<script>
//创建异步组件
import {defineAsyncComponent} from "vue";
const taoHeader=defineAsyncComponent(()=>import("@/components/tao-header.vue"))
const taoFooter=defineAsyncComponent(()=>import("@/components/tao-footer.vue"))
const taoMain=defineAsyncComponent(()=>import("@/components/tao-main.vue"))

export default {
  name: "App",
  components: {
    taoHeader,
    taoMain,
    taoFooter
  }
}
</script>
<style lang="less">
#app {
  width: 1000px;
  margin: 0 auto;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
</style>
